
export default G6 => {
    G6.registerBehavior('canvas-event', {
        getDefaultCfg () {
            return {
                originOffset: [],
                offset: [],
                isDrag: false
            }
        },
        getEvents () {
            return {
                'canvas:mousemove': 'onCanvasMouseMove',
                'canvas:mousedown': 'onCanvasMouseDown',
                'canvas:mouseup': 'onCanvasMouseUp',
                'canvas:dragstart': 'onCanvasDragStart',
                'canvas:mouseenter': 'onCanvasMouseenter',
                // 'canvas:drag': 'onCanvasDrag',
                'canvas:dragend': 'onCanvasDragEnd'
            }
        },
        onCanvasMouseenter (e) {
            e.target.get('el').style.cursor = 'grab'
        },
        onCanvasMouseMove (e) {
            // console.log(e)
            // console.log(this.isDrag)
            // e.target.get('el').style.cursor = 'grabbing'
        },
        onCanvasMouseDown (e) {
            e.target.get('el').style.cursor = 'grabbing'
        },
        onCanvasMouseUp (e) {
            e.target.get('el').style.cursor = 'grab'
        },
        onCanvasDragStart (e) {
            e.target.get('el').style.cursor = 'grabbing'
            if (!this.isDrag) {
                const { el } = e.target.cfg
                const dx = el.getAttribute('dx')
                const dy = el.getAttribute('dy')
                this.originOffset = [+dx, +dy]
                this.offset = [e.clientX, e.clientY]
                this.isDrag = true
            }
        },
        /* onCanvasDrag (e) {
    }, */
        onCanvasDragEnd (e) {
            if (this.isDrag) {
                e.target.get('el').style.cursor = 'grab'
                const { el } = e.target.cfg
                const dx = this.originOffset[0] + e.clientX - this.offset[0]
                const dy = this.originOffset[1] + e.clientY - this.offset[1]

                el.setAttribute('dx', dx)
                el.setAttribute('dy', dy)
                this.graph.emit('on-canvas-dragend', {
                    ...e,
                    dx,
                    dy
                })
                this.isDrag = false
            }
        }
    })
}
